<template>
  <div class="view-container">
    <div class="main-content">
      <div class="list-container">
        <el-container>
          <el-header>

            <!-- 标题头 -->
            <el-row :gutter="24">
              <el-col :span="6">
                <div style="font-size: 20px">
                  <p>保险金管理</p>
                </div>
              </el-col>
              <el-col :span="16" />
              <!-- <el-col :span="2">
                <el-button plain @click="newly">新建</el-button>
              </el-col>  -->
              <el-divider style="line-height: 10px" />
            </el-row>
          </el-header>
          <el-main>
            <el-form
              :model="formData"
              :rules="rules"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-row :gutter="24">
                <!-- 这里是保证金选择 -->
                <el-form-item
                  label="保证金类型"
                  style="width: 20%"
                >
                  <el-select
                    v-model="formData.buery"
                    class="cash"
                    label="保证金类型"
                    placeholder="请选择保证金类型"
                    @click="handlList"
                  >
                    <el-option
                      v-for="item in optiones"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <!-- 这里是地区选择 -->
                <el-form-item
                  label="所在地区"
                  style="width: 20%"
                >
                  <el-cascader
                    v-model="formData.value"
                    :span="4"
                    :popper-append-to-body="false"
                    style="width: 100%"
                    placeholder="请选择地区"
                    :options="citys"
                    :props="{ value: 'regionCode', label: 'regionName' }"
                    @change="areaChange"
                  />
                </el-form-item>
                <!-- 这里是付款类型选择 -->
                <el-form-item
                  style="margin-left: 10px"
                  label="付款类型"
                >
                  <el-select
                    v-model="formData.payType"
                    :span="4"
                    class="cash"
                    label="付款类型"
                    placeholder="请选择付款类型"
                    @click="handlList"
                  >
                    <el-option
                      v-for="item in option2.filter(
                        (p) => p.value !== 'direct'
                      )"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <!-- 这里是关键字查询 -->
                <el-form-item label="关键字">
                  <el-input
                    v-model="formData.keyword"
                    placeholder="请输入关键字"
                  />
                </el-form-item>
                <!-- 这里是重置-查询-按钮 -->
                <el-form-item>
                  <el-button @click="chongzhi">重置</el-button>
                  <el-button @click="handlSearch">查询</el-button>
                </el-form-item>
              </el-row>
            </el-form>
          </el-main>
          <div>
            <!-- 展示表格 -->
            <table-view
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="marginNo"
                align="center"
                label="保证金编号"
                width="100px"
              />
              <el-table-column
                prop="stype"
                align="center"
                label="保证金类型"
                width="150px"
              >
                <template #default="{ row }">
                  {{ row.marginStatus }}
                </template>
              </el-table-column>
              <el-table-column
                prop="marginMoney"
                align="center"
                label="保证金(元)"
              />
              <el-table-column
                prop="marginType"
                align="center"
                label="付款方类型"
              />
              <el-table-column
                prop="payerName"
                align="center"
                label="付款方名称"
              />
              <el-table-column
                prop="region"
                align="center"
                label="所在地区"
                width="200px"
              />
              <el-table-column
                prop="paymentBank"
                align="center"
                label="付款方开户行"
              />
              <el-table-column
                prop="paymentAccount"
                align="center"
                label="付款账号"
              />
              <el-table-column
                prop="provinceCode"
                align="center"
                label="状态"
              />
              <el-table-column
                prop="operation"
                align="center"
                label="操作"
              >
                <el-button
                  type="text"
                  align="center"
                  @click="elent"
                >编辑</el-button>
              </el-table-column>
            </table-view>
            <Pagination
              v-model:page="formData.page"
              v-model:limit="formData.pageSize"
              style="display: flex; justify-content: flex-end"
              :total="total"
              @pagination="handlList"
            />
          </div>
          <formPersonnel
            ref="formPersonnelRef"
            @succsess="succsess"
          />
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, getCurrentInstance, inject, onMounted, reactive, toRefs,} from 'vue'
import {useRouter} from 'vue-router'
import areas from '@/utils/area.js'
import {crmStore} from '@CRM/store'
import Template from '../../../components/comDetailView/template.vue'

export default defineComponent({
  name: 'BusinessList',
  components: {
    Template,
  },
  setup() {
    const citys = areas
    const currentInstance = getCurrentInstance()
    const router = useRouter()
    const api = inject('api')

    var data = reactive({
      formData: {
        buery: '',
        value: '',
        payType: '',
        keyword: '',
        pageSize: 20,
        page: 1,
      },
      tableData: [],
      total: 0,
      visible: false,
    })
    // 保证金选择框
    const optiones = crmStore.getters['dictionary/getDictionary']['payee_type']
    // const marginType =
    //   crmStore.getters["dictionary/getDictionary"]["payee_type"];
    // 代理 兼职 选择框
    const option2 = crmStore.getters['dictionary/getDictionary']['agent_type']
    // 新建
    // var title = ref('')
    // const newly = () => {
    // console.log(popupDialog)
    // popupDialog.value.open()
    // title.value = '新建'
    // }
    //  var formatter = (row, column) => {
    //    marginType = areacodefilter(row[column.property])
    //   return marginType
    // };
    // 新建的弹出表单
    // const Sleeve = () => {
    //   getList(formData)
    // }
    const areaChange = (val) => {
      console.log(val)
    }
    // 重置
    const chongzhi = () => {
      data.formData = {
        buery: '',
        value: '',
        payType: '',
        keyword: '',
        pageSize: 20,
        page: 1,
      }
      handlList()
    }
    // 获取列表
    const handlList = () => {
      api.deposit.DEPOSIT_LIST(data.formData).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || []
          data.total = res.data.total
        }
      })
    }

    // 搜索
    const handlSearch = () => {
      data.formData.page = 1
      handlList()
    }
    // 删除
    const elent = (row) => {
      currentInstance.proxy
        .alertBox({
          message: '删除后，数据不可恢复，确认删除？',
          title: '删除',
        })
        .then(() => {
          api.distributors
            .DEPOSIT_DELETE({
              id: row.id,
            })
            .then((res) => {
              if (res.code) {
                currentInstance.proxy.customMessage({
                  type: 'error',
                  message: res.msg,
                })
              } else {
                getList()
              }
            })
        })
        .catch((err) => {
          console.log(err)
        })
    }
    // 刷新列表
    const succsess = () => {
      handlList()
    }
    // 页码
    const pagination = () => {}
    // 生命周期
    onMounted(() => {
      handlList()
    })

    return {
      ...toRefs(data),
      citys,
      areaChange,
      chongzhi,
      // Sleeve,
      optiones,
      option2,
      elent,
      succsess,
      pagination,
      // handlList,
      handlSearch,
      pageSize: 20,
      page: 1,
      // formatter
    }
  },
})
</script>

<style scoped>
.el-header {
  el-header-height: "47px";
}
.el-divider--horizontal {
  height: 3px;
  margin: 2px;
}
.el-container.layout-cont .el-main {
  background-color: #ffff;
}
</style>
